<template>
  <div class="admin-layout">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="logo">
        <div class="logo-icon">
          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
            <path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>
          </svg>
        </div>
        <h2>智护银龄</h2>
        <p class="logo-subtitle">后台管理系统</p>
      </div>
      
      <nav class="menu">
        <div 
          v-for="item in menuItems" 
          :key="item.key"
          :class="['menu-item', { active: currentMenu === item.key }]"
          @click="handleMenuClick(item.key)"
        >
          <div class="menu-icon">
            <svg v-if="item.key === 'welcome'" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
              <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
            </svg>
            <svg v-else-if="item.key === 'community-list'" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
              <path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>
            </svg>
            <svg v-else-if="item.key === 'community-members'" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
            <svg v-else-if="item.key === 'add-member'" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
            </svg>
          </div>
          <span class="menu-label">{{ item.label }}</span>
        </div>
      </nav>
      
      <div class="sidebar-footer">
        <div class="version">v1.0.0</div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <header class="header">
        <div class="header-left">
          <div class="breadcrumb">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
              <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
            </svg>
            {{ getCurrentMenuLabel() }}
          </div>
        </div>
        
        <div class="user-info">
          <div class="user-avatar">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
          </div>
          <span class="username">欢迎, {{ userInfo.name }}</span>
          <button class="logout-btn" @click="handleLogout">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
              <path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/>
            </svg>
            退出
          </button>
        </div>
      </header>

      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { clearAuth, getUserInfo } from '../../utils/auth'

const router = useRouter()
const route = useRoute()
const currentMenu = ref('welcome')
const userInfo = ref({ name: 'Admin' })

const menuItems = [
  { key: 'welcome', label: '欢迎页面' },
  { key: 'community-list', label: '社区列表' },
  { key: 'community-members', label: '社区成员' },
  { key: 'add-member', label: '添加成员' }
]

const handleMenuClick = (key) => {
  currentMenu.value = key
  router.push(`/admin/${key}`)
}

const getCurrentMenuLabel = () => {
  const item = menuItems.find(item => item.key === currentMenu.value)
  return item ? item.label : ''
}

const handleLogout = () => {
  clearAuth()
  router.push('/adminLogin')
}

// 根据当前路由设置激活菜单项
const setActiveMenu = () => {
  const path = route.path
  if (path.includes('community-list')) {
    currentMenu.value = 'community-list'
  } else if (path.includes('community-members')) {
    currentMenu.value = 'community-members'
  } else if (path.includes('add-member')) {
    currentMenu.value = 'add-member'
  } else {
    currentMenu.value = 'welcome'
  }
}

// 获取用户信息
const getUserInfoData = () => {
  const user = getUserInfo()
  if (user) {
    userInfo.value = user
  }
}

onMounted(() => {
  setActiveMenu()
  getUserInfoData()
})
</script>

<style scoped>
.admin-layout {
  display: flex;
  min-height: 100vh;
  background: #f0f2f5;
}

.sidebar {
  width: 256px;
  background: linear-gradient(180deg, #001529 0%, #002140 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px rgba(0,21,41,0.15);
  z-index: 100;
}

.logo {
  padding: 24px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.logo-icon {
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
}

.logo-icon svg {
  color: #4facfe;
}

.logo h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.logo-subtitle {
  margin: 0;
  font-size: 12px;
  color: #8c8c8c;
}

.menu {
  flex: 1;
  padding: 16px 0;
  overflow-y: auto;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.3s;
  margin: 4px 12px;
  border-radius: 6px;
}

.menu-item:hover {
  background: rgba(255,255,255,0.08);
}

.menu-item.active {
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
}

.menu-icon {
  margin-right: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-label {
  font-size: 14px;
  font-weight: 500;
}

.sidebar-footer {
  padding: 16px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.version {
  font-size: 12px;
  color: #8c8c8c;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,0.08);
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #2c3e50;
}

.breadcrumb svg {
  color: #4facfe;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.username {
  color: #2c3e50;
  font-weight: 500;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(255, 107, 107, 0.2);
}

.logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 107, 107, 0.3);
}

.content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .sidebar {
    width: 70px;
  }
  
  .logo h2,
  .logo-subtitle,
  .menu-label,
  .username {
    display: none;
  }
  
  .logo {
    padding: 16px 8px;
  }
  
  .logo-icon {
    margin-bottom: 0;
  }
  
  .menu-item {
    justify-content: center;
    padding: 16px 0;
    margin: 4px 8px;
  }
  
  .menu-icon {
    margin-right: 0;
  }
  
  .user-info {
    gap: 8px;
  }
}
</style>